<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>团队管理系统</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
        background-color: #f5f7fa;
        color: #333;
      }

      .container {
        display: flex;
        min-height: 100vh;
      }

      /* 导航栏样式 */
      .navbar {
        background-color: #2c3e50;
        color: white;
        padding: 0 20px;
        display: flex;
        height: 60px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
      }

      .nav-item {
        padding: 18px 20px;
        cursor: pointer;
        position: relative;
        font-weight: 500;
      }

      .nav-item.active {
        background-color: #3498db;
      }

      .nav-item.active::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #1abc9c;
      }

      /* 主内容区域 */
      .main-content {
        flex: 1;
        padding: 80px 30px 30px;
      }

      .header {
        margin-bottom: 30px;
      }

      .header h1 {
        color: #2c3e50;
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .header p {
        color: #7f8c8d;
      }

      /* 卡片样式 */
      .card {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        padding: 25px;
        margin-bottom: 25px;
      }

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #ecf0f1;
      }

      .card-title {
        font-size: 20px;
        font-weight: 600;
        color: #2c3e50;
      }

      .btn {
        padding: 10px 15px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .btn-primary {
        background-color: #e67e22;
        color: white;
      }

      .btn-primary:hover {
        background-color: #d35400;
      }

      /* 权限卡片样式 */
      .permission-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 15px;
      }

      .permission-card {
        background-color: white;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        padding: 15px;
        transition: all 0.2s;
      }

      .permission-card:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
      }

      .permission-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }

      .color-indicator {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-right: 10px;
      }

      .permission-name {
        font-weight: 600;
        font-size: 16px;
        color: #2c3e50;
        flex: 1;
      }

      .permission-actions {
        display: flex;
        gap: 5px;
      }

      .icon-btn {
        background: none;
        border: none;
        cursor: pointer;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7f8c8d;
        transition: background-color 0.2s;
      }

      .icon-btn:hover {
        background-color: #f5f5f5;
      }

      .permission-desc {
        color: #7f8c8d;
        font-size: 14px;
        margin-bottom: 10px;
      }

      .permission-features {
        margin-top: 15px;
      }

      .feature-title {
        font-weight: 600;
        font-size: 14px;
        color: #2c3e50;
        margin-bottom: 8px;
      }

      .feature-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .feature-item {
        background-color: #f8f9fa;
        border-radius: 4px;
        padding: 6px 10px;
        font-size: 12px;
        color: #555;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .feature-item i.fa-check {
        color: #2ecc71;
      }

      .feature-item i.fa-times {
        color: #e74c3c;
      }

      /* 成员标签样式 */
      .member-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .member-tag {
        padding: 8px 15px;
        border-radius: 20px;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        transition: all 0.2s;
      }

      .member-tag:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .tag-admin {
        background-color: #ffebee;
        color: #e53935;
      }

      .tag-assistant {
        background-color: #e3f2fd;
        color: #1976d2;
      }

      .tag-visitor {
        background-color: #e8f5e9;
        color: #43a047;
      }

      .tag-other {
        background-color: #f3e5f5;
        color: #8e24aa;
      }

      /* 模态框样式 */
      .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        align-items: center;
        justify-content: center;
      }

      .modal-content {
        background-color: white;
        border-radius: 8px;
        width: 500px;
        max-width: 90%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        animation: modalFadeIn 0.3s;
      }

      @keyframes modalFadeIn {
        from {
          opacity: 0;
          transform: translateY(-30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .modal-header {
        padding: 20px;
        border-bottom: 1px solid #ecf0f1;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .modal-title {
        font-size: 20px;
        font-weight: 600;
        color: #2c3e50;
      }

      .close-btn {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #7f8c8d;
      }

      .modal-body {
        padding: 20px;
      }

      .form-group {
        margin-bottom: 20px;
      }

      .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #2c3e50;
      }

      .form-input {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 16px;
      }

      .form-input:focus {
        border-color: #3498db;
        outline: none;
      }

      .color-picker {
        display: flex;
        gap: 10px;
      }

      .color-option {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
      }

      .color-option.selected {
        border-color: #2c3e50;
      }

      .permission-checkboxes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
      }

      .checkbox-group {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .modal-footer {
        padding: 20px;
        border-top: 1px solid #ecf0f1;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
      }

      .modal-btn {
        padding: 10px 20px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        font-weight: 500;
      }

      .btn-cancel {
        background-color: #e74c3c;
        color: white;
      }

      .btn-cancel:hover {
        background-color: #c0392b;
      }

      .btn-save {
        background-color: #2ecc71;
        color: white;
      }

      .btn-save:hover {
        background-color: #27ae60;
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
        .permission-grid {
          grid-template-columns: 1fr;
        }

        .permission-checkboxes {
          grid-template-columns: 1fr;
        }
      }
    </style>
  </head>
  <body>
    <!-- 导航栏 -->
    <div class="navbar">
      <div class="nav-item">对局管理</div>
      <div class="nav-item active">团队管理</div>
      <div class="nav-item">服务器配置</div>
      <div class="nav-item">数据库管理</div>
    </div>

    <div class="container">
      <!-- 主内容区域 -->
      <div class="main-content">
        <div class="header">
          <h1>团队管理</h1>
          <p>管理团队成员和角色权限设置</p>
        </div>

        <!-- 权限卡片区域 -->
        <div class="card">
          <div class="card-header">
            <div class="card-title">角色设置</div>
            <button class="btn btn-primary" onclick="openPermissionModal()">
              <i class="fas fa-plus"></i> 新建角色
            </button>
          </div>

          <div class="permission-grid">
            <!-- 管理员卡片 -->
            <div class="permission-card">
              <div class="permission-header">
                <div
                  class="color-indicator"
                  style="background-color: #e74c3c"
                ></div>
                <div class="permission-name">管理员</div>
                <div class="permission-actions">
                  <button
                    class="icon-btn"
                    title="编辑"
                    onclick="openEditPermissionModal('管理员')"
                  >
                    <i class="fas fa-edit"></i>
                  </button>
                  <button
                    class="icon-btn"
                    title="删除"
                    onclick="openDeletePermissionModal('管理员')"
                  >
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </div>
              <div class="permission-desc">
                拥有所有权限，可以管理系统全部功能
              </div>
              <!-- <div class="permission-features">
                            <div class="feature-title">权限许可：</div>
                            <div class="feature-list">
                                <div class="feature-item">
                                    <i class="fas fa-check"></i> 对局管理
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check"></i> 团队管理
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check"></i> 服务器配置
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check"></i> 数据库管理
                                </div>
                            </div>
                        </div> -->
            </div>

            <!-- 协助者卡片 -->
            <div class="permission-card">
              <div class="permission-header">
                <div
                  class="color-indicator"
                  style="background-color: #3498db"
                ></div>
                <div class="permission-name">协助者</div>
                <div class="permission-actions">
                  <button
                    class="icon-btn"
                    title="编辑"
                    onclick="openEditPermissionModal('协助者')"
                  >
                    <i class="fas fa-edit"></i>
                  </button>
                  <button
                    class="icon-btn"
                    title="删除"
                    onclick="openDeletePermissionModal('协助者')"
                  >
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </div>
              <div class="permission-desc">
                拥有部分管理权限，可以编辑内容但不能删除
              </div>
              <!-- <div class="permission-features">
                            <div class="feature-title">权限许可：</div>
                            <div class="feature-list">
                                <div class="feature-item">
                                    <i class="fas fa-check"></i> 对局管理
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check"></i> 团队管理
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-times"></i> 服务器配置
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-times"></i> 数据库管理
                                </div>
                            </div>
                        </div> -->
            </div>

            <!-- 访客卡片 -->
            <div class="permission-card">
              <div class="permission-header">
                <div
                  class="color-indicator"
                  style="background-color: #2ecc71"
                ></div>
                <div class="permission-name">访客</div>
                <div class="permission-actions">
                  <button
                    class="icon-btn"
                    title="编辑"
                    onclick="openEditPermissionModal('访客')"
                  >
                    <i class="fas fa-edit"></i>
                  </button>
                  <button
                    class="icon-btn"
                    title="删除"
                    onclick="openDeletePermissionModal('访客')"
                  >
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </div>
              <div class="permission-desc">
                只能查看内容，不能进行任何修改操作
              </div>
              <!-- <div class="permission-features">
                            <div class="feature-title">权限许可：</div>
                            <div class="feature-list">
                                <div class="feature-item">
                                    <i class="fas fa-eye"></i> 查看对局
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-eye"></i> 查看团队
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-times"></i> 服务器配置
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-times"></i> 数据库管理
                                </div>
                            </div>
                        </div> -->
            </div>
          </div>
        </div>

        <!-- 成员管理卡片 -->
        <div class="card">
          <div class="card-header">
            <div class="card-title">团队成员</div>
            <button class="btn btn-primary" onclick="openMemberModal()">
              <i class="fas fa-plus"></i> 新增成员
            </button>
          </div>

          <div class="member-tags">
            <div
              class="member-tag tag-admin"
              onclick="openEditMemberModal('admin', '管理员')"
            >
              <i class="fas fa-user"></i> admin
            </div>
            <div
              class="member-tag tag-admin"
              onclick="openEditMemberModal('天帝', '管理员')"
            >
              <i class="fas fa-user"></i> 天帝
            </div>
            <div
              class="member-tag tag-assistant"
              onclick="openEditMemberModal('肯尼迪', '协助者')"
            >
              <i class="fas fa-user"></i> 肯尼迪
            </div>
            <div
              class="member-tag tag-visitor"
              onclick="openEditMemberModal('16岁那年打狙击', '访客')"
            >
              <i class="fas fa-user"></i> 16岁那年打狙击
            </div>
            <div
              class="member-tag tag-other"
              onclick="openEditMemberModal('intman', '其他')"
            >
              <i class="fas fa-user"></i> intman
            </div>
            <div
              class="member-tag tag-other"
              onclick="openEditMemberModal('卢本伟', '其他')"
            >
              <i class="fas fa-user"></i> 卢本伟
            </div>
            <div
              class="member-tag tag-other"
              onclick="openEditMemberModal('祁同伟', '其他')"
            >
              <i class="fas fa-user"></i> 祁同伟
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新建权限角色模态框 -->
    <div class="modal" id="permissionModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">创建权限角色</div>
          <button class="close-btn" onclick="closeModal('permissionModal')">
            &times;
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label"
              >权限名称 <span style="color: #e74c3c">*</span></label
            >
            <input type="text" class="form-input" placeholder="输入权限名称" />
          </div>

          <div class="form-group">
            <label class="form-label">描述</label>
            <input type="text" class="form-input" placeholder="输入权限描述" />
          </div>

          <div class="form-group">
            <label class="form-label"
              >标记颜色 <span style="color: #e74c3c">*</span></label
            >
            <div class="color-picker">
              <div
                class="color-option selected"
                style="background-color: #e74c3c"
              ></div>
              <div class="color-option" style="background-color: #3498db"></div>
              <div class="color-option" style="background-color: #2ecc71"></div>
              <div class="color-option" style="background-color: #f39c12"></div>
              <div class="color-option" style="background-color: #9b59b6"></div>
            </div>
          </div>

          <!-- <div class="form-group">
                    <label class="form-label">权限许可 <span style="color: #e74c3c;">*</span></label>
                    <div class="permission-checkboxes">
                        <div class="checkbox-group">
                            <input type="checkbox" id="view-game">
                            <label for="view-game">对局管理 - 可查看</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="manage-game">
                            <label for="manage-game">对局管理 - 可管理</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="view-team">
                            <label for="view-team">团队管理 - 可查看</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="manage-team">
                            <label for="manage-team">团队管理 - 可管理</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="view-server">
                            <label for="view-server">服务器配置 - 可查看</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="manage-server">
                            <label for="manage-server">服务器配置 - 可管理</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="view-db">
                            <label for="view-db">数据库管理 - 可查看</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="manage-db">
                            <label for="manage-db">数据库管理 - 可管理</label>
                        </div>
                    </div>
                </div> -->
        </div>
        <div class="modal-footer">
          <button
            class="modal-btn btn-cancel"
            onclick="closeModal('permissionModal')"
          >
            取消
          </button>
          <button class="modal-btn btn-save" onclick="savePermission()">
            创建
          </button>
        </div>
      </div>
    </div>

    <!-- 编辑权限角色模态框 -->
    <div class="modal" id="editPermissionModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">编辑权限角色</div>
          <button class="close-btn" onclick="closeModal('editPermissionModal')">
            &times;
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label"
              >权限名称 <span style="color: #e74c3c">*</span></label
            >
            <input
              type="text"
              class="form-input"
              id="edit-permission-name"
              placeholder="输入权限名称"
            />
          </div>

          <div class="form-group">
            <label class="form-label">描述</label>
            <input
              type="text"
              class="form-input"
              id="edit-permission-desc"
              placeholder="输入权限描述"
            />
          </div>

          <div class="form-group">
            <label class="form-label"
              >标记颜色 <span style="color: #e74c3c">*</span></label
            >
            <div class="color-picker">
              <div
                class="color-option selected"
                style="background-color: #e74c3c"
              ></div>
              <div class="color-option" style="background-color: #3498db"></div>
              <div class="color-option" style="background-color: #2ecc71"></div>
              <div class="color-option" style="background-color: #f39c12"></div>
              <div class="color-option" style="background-color: #9b59b6"></div>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label"
              >权限许可 <span style="color: #e74c3c">*</span></label
            >
            <div class="permission-checkboxes">
              <div class="checkbox-group">
                <input type="checkbox" id="edit-view-game" />
                <label for="edit-view-game">对局管理 - 可查看</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-manage-game" />
                <label for="edit-manage-game">对局管理 - 可管理</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-view-team" />
                <label for="edit-view-team">团队管理 - 可查看</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-manage-team" />
                <label for="edit-manage-team">团队管理 - 可管理</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-view-server" />
                <label for="edit-view-server">服务器配置 - 可查看</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-manage-server" />
                <label for="edit-manage-server">服务器配置 - 可管理</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-view-db" />
                <label for="edit-view-db">数据库管理 - 可查看</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-manage-db" />
                <label for="edit-manage-db">数据库管理 - 可管理</label>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button
            class="modal-btn btn-cancel"
            onclick="closeModal('editPermissionModal')"
          >
            取消
          </button>
          <button class="modal-btn btn-save" onclick="savePermissionChanges()">
            保存
          </button>
        </div>
      </div>
    </div>

    <!-- 删除权限确认模态框 -->
    <div class="modal" id="deletePermissionModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">删除权限角色</div>
          <button
            class="close-btn"
            onclick="closeModal('deletePermissionModal')"
          >
            &times;
          </button>
        </div>
        <div class="modal-body">
          <p>
            确定要删除权限角色 "<span id="delete-permission-name"></span>"
            吗？此操作不可逆。
          </p>
        </div>
        <div class="modal-footer">
          <button
            class="modal-btn btn-cancel"
            onclick="closeModal('deletePermissionModal')"
          >
            取消
          </button>
          <button
            class="modal-btn btn-save"
            onclick="confirmDeletePermission()"
          >
            确认删除
          </button>
        </div>
      </div>
    </div>

    <!-- 新增成员模态框 -->
    <div class="modal" id="memberModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">添加成员</div>
          <button class="close-btn" onclick="closeModal('memberModal')">
            &times;
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label"
              >成员名称 <span style="color: #e74c3c">*</span></label
            >
            <input type="text" class="form-input" placeholder="输入成员名称" />
          </div>

          <div class="form-group">
            <label class="form-label"
              >登录账户 <span style="color: #e74c3c">*</span></label
            >
            <input type="text" class="form-input" placeholder="输入登录账户" />
          </div>

          <div class="form-group">
            <label class="form-label"
              >登录密码 <span style="color: #e74c3c">*</span></label
            >
            <input
              type="password"
              class="form-input"
              placeholder="输入登录密码"
            />
          </div>

          <div class="form-group">
            <label class="form-label"
              >权限分组 <span style="color: #e74c3c">*</span></label
            >
            <select class="form-input">
              <option value="">选择权限分组</option>
              <option value="admin">管理员</option>
              <option value="assistant">协助者</option>
              <option value="visitor">访客</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button
            class="modal-btn btn-cancel"
            onclick="closeModal('memberModal')"
          >
            取消
          </button>
          <button class="modal-btn btn-save" onclick="saveMember()">
            创建
          </button>
        </div>
      </div>
    </div>

    <!-- 编辑成员模态框 -->
    <div class="modal" id="editMemberModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">编辑成员</div>
          <button class="close-btn" onclick="closeModal('editMemberModal')">
            &times;
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label"
              >成员名称 <span style="color: #e74c3c">*</span></label
            >
            <input
              type="text"
              class="form-input"
              id="edit-member-name"
              placeholder="输入成员名称"
            />
          </div>

          <div class="form-group">
            <label class="form-label"
              >登录账户 <span style="color: #e74c3c">*</span></label
            >
            <input
              type="text"
              class="form-input"
              id="edit-member-account"
              placeholder="输入登录账户"
            />
          </div>

          <div class="form-group">
            <label class="form-label"
              >登录密码 <span style="color: #e74c3c">*</span></label
            >
            <input
              type="password"
              class="form-input"
              id="edit-member-password"
              placeholder="输入登录密码"
            />
          </div>

          <div class="form-group">
            <label class="form-label"
              >权限分组 <span style="color: #e74c3c">*</span></label
            >
            <select class="form-input" id="edit-member-role">
              <option value="">选择权限分组</option>
              <option value="admin">管理员</option>
              <option value="assistant">协助者</option>
              <option value="visitor">访客</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button class="modal-btn btn-cancel" onclick="deleteMember()">
            删除此用户
          </button>
          <button class="modal-btn btn-save" onclick="saveMemberChanges()">
            保存修改
          </button>
        </div>
      </div>
    </div>

    <script>
      // 打开模态框函数
      function openPermissionModal() {
        document.getElementById("permissionModal").style.display = "flex";
      }

      function openEditPermissionModal(permissionName) {
        // 模拟加载权限数据
        document.getElementById("edit-permission-name").value = permissionName;
        document.getElementById("edit-permission-desc").value =
          getPermissionDescription(permissionName);
        document.getElementById("editPermissionModal").style.display = "flex";
      }

      function openDeletePermissionModal(permissionName) {
        document.getElementById("delete-permission-name").textContent =
          permissionName;
        document.getElementById("deletePermissionModal").style.display = "flex";
      }

      function openMemberModal() {
        document.getElementById("memberModal").style.display = "flex";
      }

      function openEditMemberModal(memberName, memberRole) {
        // 模拟加载成员数据
        document.getElementById("edit-member-name").value = "";
        document.getElementById("edit-member-account").value = "";
        document.getElementById("edit-member-password").value = "";
        document.getElementById("edit-member-role").value = "";
        document.getElementById("editMemberModal").style.display = "flex";
      }

      // 关闭模态框函数
      function closeModal(modalId) {
        document.getElementById(modalId).style.display = "none";
      }

      // 保存函数
      function savePermission() {
        alert("权限角色已创建成功！");
        closeModal("permissionModal");
      }

      function savePermissionChanges() {
        alert("权限角色修改已保存！");
        closeModal("editPermissionModal");
      }

      function confirmDeletePermission() {
        const permissionName = document.getElementById(
          "delete-permission-name"
        ).textContent;
        alert(`权限角色 "${permissionName}" 已删除！`);
        closeModal("deletePermissionModal");
      }

      function saveMember() {
        alert("成员已添加成功！");
        closeModal("memberModal");
      }

      function saveMemberChanges() {
        alert("成员信息修改已保存！");
        closeModal("editMemberModal");
      }

      function deleteMember() {
        if (confirm("确定要删除此用户吗？此操作不可恢复。")) {
          alert("用户已删除！");
          closeModal("editMemberModal");
        }
      }

      // 辅助函数
      function getPermissionDescription(name) {
        const descriptions = {
          管理员: "拥有所有权限，可以管理系统全部功能",
          访客: "只能查看内容，不能进行任何修改操作",
          协助者: "拥有部分管理权限，可以编辑内容但不能删除",
        };
        return descriptions[name] || "";
      }

      // 颜色选择
      const colorOptions = document.querySelectorAll(".color-option");
      colorOptions.forEach((option) => {
        option.addEventListener("click", () => {
          colorOptions.forEach((opt) => opt.classList.remove("selected"));
          option.classList.add("selected");
        });
      });

      // 点击模态框外部关闭
      window.addEventListener("click", (event) => {
        const modals = document.querySelectorAll(".modal");
        modals.forEach((modal) => {
          if (event.target === modal) {
            modal.style.display = "none";
          }
        });
      });
    </script>
  </body>
</html>
